<!DOCTYPE html>
<html>
<head>
    <title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="author" content="Frank Fu">
    <meta name="keywords" content="Python, Web, CS, Leetcode, Algorithm">
    <meta property="og:locale" content="zh_CN"/>
    <meta property="og:site_name" content="Frank Fu's"/>

    <link rel="shortcut icon" href="/static/image/favicon.ico"/>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Awesome Font CSS -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- customized CSS -->
    <link rel="stylesheet" href="/static/css/skymerald.css">
    <link rel="stylesheet" href="/static/css/blogstyle.css">
    <link rel="stylesheet" href="/static/css/pygments.css" >
    <link rel="stylesheet" href="/static/css/highlight.css" >
    <!-- javascript -->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script> 
    <script src="/static/js/awesome.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.min.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/static/css/github.css">
</head>
<body style="background-color:#FAF7FA">
<!-- JUMBOTRON -->
<div class="jumbotron">
    <div class="container">
        <h1 id="jumbotronName" class="text-center">Fu Mingfeng</h1>
        <p id="jumbotronSay" class="text-center">
            <cite>
                我可以划船不用浆，也可以扬帆没有风，因为我这一生，全靠浪~~~~~~
            </cite>
        </p>
        <p id="jumbotronSayby" style="text-align:right;margin-right:50px">
            <small>by <strong>灵猪谁仰</strong></small>
        </p>
    </div>
</div>

<!-- Navigation Bar!! -->
<nav class="navbar navbar-inverse" style="z-index:10" data-spy="affix" data-offset-top="297">
    <!-- Define the container -->
    <div class="container-fluid">
        <!-- The header of the website -->
        <!-- Define the responsive collapse button -->
        <!-- Three <span> tags works as three-bar icon -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">
                &nbsp;<strong class="iconlogo">Frank</strong>
            </a>
        </div>
        <!-- Then the list items of the navi-bar -->
        <div class="collapse navbar-collapse navbar-right" id="myNavbar">
            <ul class="nav navbar-nav">
                <li id="blogs">
                    <a href="/blogs?page=1">
                        <i class="fa fa-newspaper-o fa-2x" aria-hidden="true"></i> BLOG
                    </a>
                </li>
                <li id="photos">
                    <a href="/photos?page=1">
                        <i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i> PHOTO
                    </a>
                </li>
                <li id="about">
                    <a href="/about">
                        <i class="fa fa-user fa-2x" aria-hidden="true"></i> ABOUT.ME
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- all the content after navbar comes in one container-fluid block -->
<div class="container-fluid outer-container">
    <!-- Back-to-Top icon -->
    <div class="back-to-top" aria-hidden="true">
            <span class="fa-stack fa-1x">
                <i class="fa fa-square-o fa-stack-2x"></i>
                <i class="fa fa-reply-all fa-rotate-90 fa-stack-1x"></i>
            </span>
    </div>
    <!-- all block content comes in a container -->
    <div id="content-container" class="container">
        {% block content %} {% endblock %}
    </div>


</div>
<!-- footer -->
<footer class="panel panel-footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 text-center">
                <div class="btn-group">
                    <a class="btn btn-default" href="https://github.com/rxjhfmf" target="_blank" 
                       title="Follow me on Github"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
                    <a class="btn btn-default" href="http://weibo.com/u/5623066082" target="_blank" 
                       title="Follow me on Weibo"><i class="fa fa-weibo fa-2x" aria-hidden="true"></i></a>
                    <a class="btn btn-default" href="./static/photos/WeChat.png" target="_blank" 
                       title="Follow me on WeChat"><i class="fa fa-weixin fa-2x" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-8">
                <p class="footer-text">
                    Powered by Python &nbsp;&nbsp; &copy; 2016 Fu Mingfeng
                </p>
                <p class="footer-text">Photo gallery designed by 
                    <a target="_blank" href="https://github.com/michaelsoriano/bootstrap-photo-gallery">
                        Michael Soriano
                    </a>
                </p>
            </div>
        </div>
    </div>
</footer>
<script>
    $("body").animate({"scrollTop": 297}, 600);
    $(".back-to-top").click(function () {
        if (window.pageYOffset < 299) {
            backToPos = "0px";
        }
        else {
            backToPos = "298px";
        }
        $("body").animate({"scrollTop": backToPos}, 300);
    });
    $(function () {
        $(window).scroll(function () {
            if (window.pageYOffset < 250 || $(window).width() < 750) {
                $(".back-to-top").hide();
            } else {
                $(".back-to-top").show();
            }
        });
    });
</script>

{% block script %} {% endblock %}

</body>
</html>